<template>
    <div>
        <van-nav-bar title="编辑个人资料" class="item-navbar">
            <router-link to="/setting" slot="left">
                <img src="http://qxkmdhmin.hn-bkt.clouddn.com/back.png">
            </router-link>
            <span slot="right">保存</span>
        </van-nav-bar>
        <van-row style="text-align:center;margin-top:10px">
            <img class="row-img" src="http://qxkmdhmin.hn-bkt.clouddn.com/food2.jpg">
            <p>点击更换头像</p>
        </van-row>
        <!-- 更改用户名 -->
        <van-row>
            <van-cell-group>
                <van-field v-model="value" label="用户名" placeholder="请输入用户名" input-align="right" />
            </van-cell-group>
        </van-row>
        <!-- 更改性别 -->
        <van-row>
            <van-cell title="性别" is-link :value="user.gender===1?'男':'女'" @click="isEditGenderShow=true"></van-cell>
            <!-- 编辑用户性别 -->
                <van-action-sheet
                v-model="isEditGenderShow"
                :actions="actions"
                cancel-text="取消"
                close-on-click-action
                @select="onGenderSelect"
                />
        </van-row>
        <!-- 更改生日 -->
        <van-row>
            <van-cell title="生日" :value="date" @click="show = true" />
            <van-calendar
            v-model="show"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="onConfirm"
            />
        </van-row>
        <!-- 更改职业 -->
        <van-row></van-row>
        <!-- 更改家乡 -->
        <van-row>
            
        </van-row>
        <!-- 个人简介 -->
        <van-row></van-row>
    </div>
</template>
<script>
// 引入moment.js
var moment = require('moment');
moment().format();
export default {
    name: "EditUserINfo",
    data() {
        
        return {
            user:{gender:''},
            date: '',
            show: false,
            minDate: new Date(1971, 0, 1),
            maxDate: new Date(2025, 12, 31),
            isEditGenderShow: false,
            // name会显示出来，value是我们自己添加的
            actions: [{ name: "男",value: 1 }, { name: "女",value:0 }],
            value: '',
            
        };
    },
    // 页面挂载是执行 
    mounted(){
        this.getdata();
    },
    methods: {
        formatDate(date) {
            console.log(date);
            return `${moment(date).year()}/${date.getMonth() + 1}/${date.getDate()}`;
        },
        onConfirm(date) {
            this.show = false;
            this.date = this.formatDate(date);
        },
        onGenderSelect(data) {
            this.user.gender=data.value
            this.isEditGenderShow=false
        },
        getdata(){
            this.axios.get('/user/data?uid=1').then(result=>{
                // 获取数据库的用户名和用户图片  渲染到页面
                console.log(result);
                this.value = result.data.results[0].uname;
                
            })
        }
    },
}
</script>

<style scoped>
    .row-img{border-radius: 50%;width: 6rem;height: 6rem;text-align: center;margin-bottom: 10px;}
    p{margin-bottom: 20px;}
</style>